<template>
  <page-dialog
    :title="dialogInfo.title"
    v-model:visible="shows"
    :width="dialogInfo.width"
    :bt-loading="dialogInfo.btLoading"
    :bt-list="dialogInfo.btList"
  >
    <!-- 条件栏 -->
    <page-filter
    v-model:query="filterInfo.query"
      :filter-list="filterInfo.list"
    />
    <page-table
      :refresh="tableInfo.refresh"
      :init-curpage="tableInfo.initCurpage"
      v-model:data="tableInfo.data"
      :api="api"
      :query="filterInfo.query"
      :field-list="tableInfo.fieldList"
      :handle="tableInfo.handle"
      :highlight-row="highlightRow"
      :check-box="checkBox"
      @handleEvent="handleEvent"
    />
  </page-dialog>
</template>

<script setup name="selectReceiveAddress">
import PageDialog from "../PageDialog/index";
import PageTable from "../PageTable/index";
import PageFilter from "../PageFilter/index";
import { getReceiveAddressPage } from "../../api/core";

const { proxy } = getCurrentInstance();
const emit = defineEmits();
const props = defineProps({
    highlightRow: {
      type: Boolean,
      default: false,
    },
    checkBox: {
      type: Boolean,
      default: true,
    },
    api: {
      type: Function,
      default: getReceiveAddressPage,
    },
    showDialog: {
      type: Boolean,
    },
    query: {
      type: Object,
      default: function () {
        return {};
      },
    },
})

      // 过滤相关配置
    const  filterInfo = reactive({
        query: {
          sort: "create_time desc",
          ...props.query,
        },
        list: [],
      })
      // 表格相关
      const  tableInfo = reactive({
        refresh: 1,
        initCurpage: 1,
        data: [],
        fieldList: [
          { label: "地址", value: "addressValue" },
          { label: "联系人", value: "contacts" },
          { label: "联系电话", value: "contactsPhone" },
          { label: "是否默认", value: "isDefaultValue" },
        ],
      })
      // 弹窗相关
      const  dialogInfo = reactive({
        title: "选择收货地址",
        btLoading: false,
        btList: [
          { label: "关闭", event: handleClose, show: true },
          {
            label: "保存",
            type: "primary",
            disabled: true,
            event: save,
            show: true,
          },
        ],
      })
      const  selectRow = ref('')

      const shows = computed({
        get() {
        return props.showDialog;
      },
      set(newValue) {
        emit("update:showDialog", newValue); // 更新父组件shows
      },
      })

    onMounted(() => {
        proxy.$nextTick(() => {
      getList();
    });
    })


    // 获取列表
  function  getList() {
      tableInfo.refresh = Math.random();
    }
    function  search() {
      tableInfo.initCurpage = Math.random();
      tableInfo.refresh = Math.random();
    }
    function save() {
      // emit('input', data)
      if (selectRow.value) {
        handleClose();
        emit("callback", selectRow.value);
      } else {
        proxy.$message({
          type: "warning",
          duration: 3500,
          showClose: true,
          message: "请选择供应商",
        });
      }
    }
    function  handleEvent(event, data) {
      switch (event) {
        case "tableClickRow":
          selectRow.value = data;
          dialogInfo.btList[1].disabled = !selectRow.value;
          break;
        case "tableCheck":
          if (data.length) {
            selectRow.value = data;
            dialogInfo.btList[1].disabled = !selectRow.value;
          }
          break;
      }
    }
    // 关闭弹窗前的回调
    function  handleClose() {
      shows.value = false;
      emit("reset");
    }
  

</script>

<style scoped>
:deep(.el-dialog__body) {
  height: 355px;
  display: flex;
  flex-direction: column;
}
</style>
